<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>lianxi</title>
		<style type="text/css">
		*{
			margin:0;
			padding:0;
		}	
		div{
			width:200px;
			height:200px;
			line-height:200px;
			margin:110px;
			border:2px dashed red;
			text-align:center;
			float:left;
			transition:all 1.5s;
		}
		div:nth-child(1):hover{
			transform:rotate(30deg);
		}
		div:nth-child(2):hover{
			transform:translateX(200px);
		}
		div:nth-child(3):hover{
			transform:skew(30deg,30deg);
		}
		div:nth-child(4):hover{
			transform:scale(1.5,1.2);
		}
		div:nth-child(5):hover{
			transform:rotate(30deg) translateX(200px) skew(30deg,30deg) scale(1.5,1.2);/* 用空格隔开 */
		}
		</style>
	</head>
	<body>
		<div>2D旋转</div>
		<div>2D平移</div>
		<div>2D扭曲</div>
		<div>2D缩放</div>
		<div>2D综合</div>
	</body>
</html>
